<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style>
		#cas{
			display: block;
			border:1px solid;
			margin:auto;
		}
		/*.controlDot{
			position:absolute;
			width:10px;
			height:10px;
			border:1px solid;
			border-radius:6px;
			background-color:#000;
		}
		.controlDot:hover{
			background-color: #FFF;
		}*/
	</style>
	<script>
		window.onload = function(){
			canvas = document.getElementById('cas');
			context = canvas.getContext('2d');
			now = "huabi"
			var polygons = [];
			var polygon;
			canvas.onmousedown = function(event){
				event = event || window.event;
				if(now !== "huabi") return;
				canCreate = true;
				var startDot ={
					x:event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft - canvas.offsetLeft,
					y:event.clientY+document.documentElement.scrollTop+document.body.scrollTop - canvas.offsetTop
				}
				polygons.forEach(function(){
					var a = Math.sqrt(Math.pow(startDot.x - this.centerX , 2) + Math.pow(startDot.y - this.centerY , 2));
					if(a <= this.radius){
						canCreate = false;
						polygon = this;
					}
				});
				if(canCreate){
					polygon = new Polygon(startDot.x , startDot.y , 0 , 6 , 0 , '' , 'rgba(0,0,0,.5)');
					polygons.push(polygon);
					polygon.slides = document.getElementById('changeSlide').value;
				}
				window.onmousemove = function(event){
					event = event || window.event;
					context.clearRect(0,0,canvas.width,canvas.height);
					var endDot ={
						x:event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft - canvas.offsetLeft,
						y:event.clientY+document.documentElement.scrollTop+document.body.scrollTop - canvas.offsetTop
					}
					if (canCreate) {
						var radius = Math.sqrt(Math.pow(endDot.x - startDot.x, 2) + Math.pow(endDot.y - startDot.y, 2)) / 2;
						var center = {
							x: (endDot.x + startDot.x) / 2,
							y: (endDot.y + startDot.y) / 2
						}
						var startAngle = endDot.y > startDot.y ? Math.acos((endDot.x - startDot.x) / (2 * radius)) : Math.acos((startDot.x - endDot.x) / (2 * radius));
						polygon.upordown = endDot.y > startDot.y ? false : true;
						polygon.centerX = center.x;
						polygon.centerY = center.y;
						polygon.radius = radius;
						polygon.startAngle = startAngle;
					}
					else {
						polygon.move(polygon.centerX+endDot.x-startDot.x , polygon.centerY+endDot.y-startDot.y);
						startDot = endDot;
					}
					drawPolygon(polygons);
				}
				window.onmouseup = function(){
					if(now !== "huabi") return;
					window.onmousemove = null;
				}
			}

			document.getElementById("clear").onclick = function(event){
				event = event || window.event;
				if(now !== "huabi") return;
				now = "picha"
				var mouse = {
					x:event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft - canvas.offsetLeft,
					y:event.clientY+document.documentElement.scrollTop+document.body.scrollTop - canvas.offsetTop
				}
				var cl = new clear(mouse.x , mouse.y , document.getElementById("clearRange").value);
				window.onmousemove = function(event){
					event = event || window.event;
					var mouse = {
						x:event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft - canvas.offsetLeft,
						y:event.clientY+document.documentElement.scrollTop+document.body.scrollTop - canvas.offsetTop
					}
					cl.move(mouse.x , mouse.y)
				}
				canvas.addEventListener("mousedown" , function(){
					if(now !== "picha") return;
					cl.clearCircle();
					window.addEventListener("mousemove" , clearEvent);
					window.addEventListener("mouseup" , function(){
						window.removeEventListener("mousemove" , clearEvent)
					});
				});

				function clearEvent(){
					event = window.event;
					console.log('ss')
					var mouse = {
						x:event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft - canvas.offsetLeft,
						y:event.clientY+document.documentElement.scrollTop+document.body.scrollTop - canvas.offsetTop
					}
					cl.clearCircle()
				}
			}

			document.getElementById("pen").onclick = function(){
				now = "huabi";
				resetImgData();
			}
		}

		var clear = function(centerX , centerY , radius){
			this.x = centerX;
			this.y = centerY;
			this.radius = radius;
			saveImgData();
		}

		clear.prototype = {
			createCircle:function(){
				context.save();
				context.beginPath();
				context.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
				context.fillStyle = "#FFF";
				context.fill();
				saveImgData();
				context.stroke();
			},
			clearCircle:function(){
				context.clip();
				context.clearRect(0,0,canvas.width , canvas.height);
				context.restore();
			},
			move:function(x , y){
				context.clearRect(0,0,canvas.width , canvas.height);
				resetImgData();
				this.x = x;
				this.y = y;
				this.createCircle();
			}
		}

		function saveImgData(){
			imageData = context.getImageData(0,0,canvas.width,canvas.height)
		}
		function resetImgData(){
			context.putImageData(imageData , 0 , 0 );
		}

		function drawPolygon(polygons){
			polygons.forEach(function(){
				this.stroke(context);
				this.fill(context);
			});
		}

		Array.prototype.forEach = function(callback){
			for(var i=0;i<this.length;i++){
				callback.call(this[i]);
			}
		}

		var Polygon = function(centerX , centerY , radius , slides , startAngle , strokeStyle , fillStyle , filled){
			this.centerX = centerX;
			this.centerY = centerY;
			this.radius = radius;
			this.slides = slides;
			this.startAngle = startAngle;
			this.strokeStyle = strokeStyle;
			this.fillStyle = fillStyle;
			this.filled = filled;
			this.upordown = false;
		}

		Polygon.prototype = {
			getPoints:function(){
				var points = [],
				angle = this.startAngle || 0;
				for(var i=0;i<this.slides;i++){
					points.push({
						x:this.upordown ? (this.centerX + this.radius * -Math.cos(angle)) : (this.centerX + this.radius * Math.cos(angle)),
						y:this.upordown ? (this.centerY + this.radius * -Math.sin(angle)) : (this.centerY + this.radius * Math.sin(angle))
					});
					angle += 2*Math.PI/this.slides;
				}
				return points;
			},
			createPath:function(){
				var points = this.getPoints();
				context.beginPath();
				context.moveTo(points[0].x , points[0].y)
				for(var i=1;i<this.slides;i++){
					context.lineTo(points[i].x , points[i].y)
				}
				context.closePath();
			},
			stroke:function(){
				context.save();
				this.createPath();
				context.strokeStyle = this.strokeStyle;
				context.stroke();
				context.restore();
			},
			fill:function(){
				context.save();
				this.createPath();
				context.fillStyle = this.fillStyle;
				context.fill();
				context.restore();
			},
			move:function(x,y){
				this.centerX = x;
				this.centerY = y;
			},
			clear:function(){
				var minX=1000000,maxX=0,minY=100000,maxY=0;
				var points = this.getPoints();
				for(var i=0;i<points.length;i++){
					minX = points[i].x > minX ? minX : points[i].x;
					minY = points[i].y > minY ? minY : points[i].y;
					maxX = points[i].x > maxX ? points[i].x : maxX;
					maxY = points[i].y > maxY ? points[i].y : maxY;
				}
				context.clearRect(minX-1 , minY-1 , maxX , maxY);
			}
		}
	</script>
	<title>绘制多边形</title>
</head>
<body>
	<div >
		<canvas id='cas' width="600" height="600">浏览器不支持canvas</canvas>
		<div style="text-align:center">
			<button id="pen">画笔</button>
			画<input type="number" min="3" id="changeSlide" value="6"style="width:50px">边型 &nbsp;&nbsp;&nbsp;
			<button id="clear">橡皮擦</button>
			<input type="range" step="1" value="50" min="1" max="100" id="clearRange">
		</div>
	</div>
</body>
</html>